<template>
  <div class="categoryListContainer">
    <div class="categoryList">
      <div class="categoryItem" v-for="(category,index) in categories" :key="index">
        <img :src="category.picUrl" alt="">
        <div class="txt">{{category.text}}</div>
      </div>
    </div>
  </div>
</template>

<script>
  import {mapState} from 'vuex'
  export default {
    name: 'category',
    computed: {
      ...mapState({
        categories: state => state.home.categories
      })
    },
  }
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
  .categoryListContainer
    width 100%
    height 373px
    background #fff
    .categoryList
      width 100%
      height 341px
      display flex
      flex-wrap wrap
      
      .categoryItem
        width 110px
        height 156px
        margin 10px 20px 9px
        text-align center
        
        img
          width 110px
          height 110px
        
        .txt
          margin 10px 0 0
</style>
